<template>
    <div class="articleglobal">
        <div style="display: flex;flex-wrap: wrap;">
            <div :class="activeid1 == item1.boardId ? 'active subitem' : 'subitem'" @click="menuindex1(item1, index)"
                v-for="item1 in children">{{ item1.boardName }}</div>
        </div>
        <div class="tablist">
            <div @click="handleclick(index)" v-for="(item, index) in list" :class="cur == index ? 'active' : ''"
                style="display: flex;align-items: center;cursor: pointer;">
                <div>{{ item }}</div> <el-divider direction="vertical" v-if="index !== list.length - 1"></el-divider>
            </div>

        </div>
        <div class="article">
            <div class="articlelist" v-for="item in articlelist">
                <div>
                    <div> <img src="../assets/default.png" v-if="item.avatar == null" style="width: 20px;height: 20px;"
                            alt="">
                            <img  :src="'/api/file/getImage/' + item.avatar"  v-else style="width: 20px;height: 20px;"
                            alt=""> <span @click="todetail(item.userId)" style="color: #4e5969;" class="hover">{{ item.nickName }}</span><el-divider
                            direction="vertical"></el-divider>
                        <span style="color: #4e5969;">{{ item.postTime }}{{ item.userIpAddress }}</span>
                        <el-divider direction="vertical"></el-divider>
                        <span style="color: #4e5969;">{{ item.pBoardName }} </span>
                        <span v-if="item.boardName">/{{ item.boardName }}</span>

                    </div>

                    <div @click="detail(item.articleId)" style="margin-top: 10px;color: #4a4a4a;font-weight: bold;" class="hover"> {{ item.title }}
                    </div>
                    <div style="margin-top: 10px;">{{ item.summary }}</div>
                    <div class="article-info" style="margin-top: 10px;">
                        <span class="iconfont icon-eye-solid" style="margin-right: 10px;">
                            {{ item.readCount == 0 ? '阅读' : item.readCount }}
                        </span>
                        <span class="iconfont icon-good" style="margin-right: 10px;">
                            {{ item.goodCount == 0 ? '点赞' : item.goodCount }}
                        </span>
                        <span class="iconfont icon-comment">
                            {{ item.commentCount == 0 ? '评论' : item.commentCount }}
                        </span>

                    </div>
                </div>

                <div>
                    <img v-if="item.cover !== '' && item.cover !== null" style="width: 100px;height: 100px;"
                        :src="'/api/file/getImage/' + item.cover" />
                </div>
            </div>
        </div>
        <div style="padding: 10px;box-sizing: border-box;">
            <el-pagination style="margin-top: 10px; " :current-page="pageNo" @current-change="handleCurrentChange"
                background layout="prev, pager, next" :total="total" />
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue';
import router from "../router";
import service from '../utils/request';
import { useRoute } from 'vue-router';
onMounted(() => {
    console.log(1243)
    if (route.params.pboardId) {

activeid1.value = 0;
getborderlist();
}
    if (route.params.boardId) {

        activeid1.value = route.params.boardId;

    }
  

    getarticlelist()
})
const detail=(id)=>{
    router.push({
        path:"/detail/"+id
    })
}
const route = useRoute();
const children = ref([]);
const activeid1 = ref();
console.log(route, "router")

watch(() => route.params, (newvalue, oldvalue) => {
    console.log(newvalue, "new")
    children.value=[]
   
    if (newvalue.pboardId) {
        // activeid1.value = newvalue.boardId;
        getborderlist();

    }
    if(newvalue.boardId){
         activeid1.value = newvalue.boardId;
        
    }else{
        activeid1.value=0
    }
    
    //  if(!newvalue.boardId){
    //     activeid1.value=0
    // }

    getarticlelist()
})
const getborderlist = async () => {
    const res = await service.get("/board/loadBoardbyid?pboardId=" + Number(route.params.pboardId));
    console.log(res)
    children.value = res.data
    children.value.unshift({
        boardId:0,
        pboardId:route.params.pboardId,
        boardName:"全部"

    })

}
const menuindex1 =(item,index)=>{
    if(item.boardId !==0){
        router.push({
    path:"/forum/"+item.pboardId+"/"+item.boardId
  })
    }else{
        router.push({
    path:"/forum/"+item.pboardId
  })
    }


}
const todetail=(e)=>{
    router.push({
        path:"/my",
        query:{
            userId:e
        }
    })

}
const list = ref(["热榜", "发布时间", "最新"]);
const cur = ref(0)
const articlelist = ref([]);
const total = ref(0)
const handleclick = (index) => {
    cur.value = index
    pageNo.value = 1
    getarticlelist()
}
const handleCurrentChange = (e) => {
    pageNo.value = e;
    getarticlelist()

}
const pageNo = ref(1);
const getarticlelist = async () => {
    const res = await service.get("/forum/loadArticle", {
        params: {
            pBoardId: route.params.pboardId ? route.params.pboardId : "",
            boardId: route.params.boardId ? route.params.boardId : 0,
            orderType: cur.value + 1,
            pageNo: pageNo.value
        }
    })
    console.log(res)
    if (res.code == 1) {
        articlelist.value = res.data.records
        total.value = res.data.total
    }
}
</script>
<style scoped>
.subitem {
    padding: 0 10px;
    border-radius: 20px;
    cursor: pointer;
    margin-right: 10px;
    text-decoration: none;
    background: rgb(231, 230, 230);
    border: 1px solid #ddd;
    margin-top: 10px;
}

.hover {
    cursor: pointer;
}

.hover:hover {
    color: #007fff !important;
}

.articlelist {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ddd;
    display: flex;
    background: #fff;
    padding-bottom: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    justify-content: space-between;
}

.active {
    color: #007fff !important;
}

.article {
    width: 100%;
    height: auto;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
}

.active {

    color: #007fff;
}

.tablist {
    width: 100%;
    padding: 10px 15px;
    box-sizing: border-box;
    height: auto;
    display: flex;
    border-bottom: 1px solid #ddd;
}

.articleglobal {
    width: 70%;
    height: auto;
    background: #fff;
    margin: 0 auto;
}
</style>